<template>
  <div class="sched-table">
    <div class="table-download">
      <div>
        <a-button type="text" @click="addColumn">
          <template #icon>
            <FilterOutlined />
          </template>
          自定义列</a-button>
      </div>
      <a-button class="border-btn" @click="exportData">
        <template #icon>
          <UploadOutlined />
        </template>
        导出</a-button>
    </div>
    <a-table  v-if="tableData.columns.length > 0 || tableData.data.length > 0" :columns="tableData.columns" :data-source="tableData.data"
              :row-selection="{selectedRowKeys: tableData.selectedRowKeys, onChange: onSelectChange}"
              :scroll="{ x: 500}"
              :pagination="pagination"
              @change="handleTableChange"
              @resizeColumn="handleResizeColumn"
              :row-key="(record) => record.id"
              :rowClassName="(record, index) => (index % 2 === 1 ? 'table-striped' : null)"
    >
      <template #headerCell="{ column }">
        <template v-if="column.key === 'a26'">
          <p :style="{ margin: '0', padding: '0' }">
            合同卸载量
          </p>
          <span>(MMbtu)</span>
        </template>
      </template>
      <template #bodyCell="{ column, text }">
        <template v-if="column.key === 'tags'">
          <div class="table-btn-box">
            <span class="table-btn btn-1" @click="goDtails(text)">查看</span>
            <!--            <span class="table-btn btn-3">终止</span>-->
          </div>
        </template>
        <template v-if="column.key === 'tradeBody'">
                  <span v-for="item in tradeareas" :key="item.label">
                        <span v-if="item.value === text">{{item.label}}</span>
                    </span>
        </template>
        <template v-if="column.key === 'tradeType'">
         <span v-for="item in areas" :key="item.label">
            <span v-if="item.value === text">{{item.label}}</span>
          </span>
        </template>
      </template>
    </a-table>
    <a-skeleton v-else active />
    <CustomColumnModel ref="columnForm"
                       @saveColumn="onSaveColumn"
                       :customData="customData"
                       :columSaveData="columSaveData"
                       :module="activeModule"
    />
    <a-drawer
        v-model:visible="visible"
        :width="520"
        class="custom-class"
        :title="`货号：${ganttInfo.goodsNum}`"
        placement="right"
        @after-visible-change="afterVisibleChange"
    >
      <template #extra>
<!--        <a-button style="margin-right: 8px" class="search-btn2" @click="showDeleteModal">删除</a-button>-->
        <a-button class="search-btn1" @click="showChildrenDrawer">编辑</a-button>
      </template>
      <div class="drawer-body">
        <div class="info-list">
          <div class="info-item">
            <div class="info-title">航次号</div>
            <div class="info-val">{{ganttInfo.voyageNo}}</div>
          </div>
          <div class="info-item">
            <div class="info-title">资源合同·采购</div>
            <div class="info-val">{{ganttInfo.contractName}}</div>
          </div>
          <div class="info-item">
            <div class="info-title">资源合同·销售</div>
            <div class="info-val">{{ganttInfo.sellerContractName}}</div>
          </div>
          <div class="info-item">
            <div class="info-title">资源方</div>
            <div class="info-val">{{ganttInfo.seller}}</div>
          </div>
          <div class="info-item">
            <div class="info-title">买方</div>
            <div class="info-val">{{ganttInfo.buyer}}</div>
          </div>
          <div class="info-item">
            <div class="info-title">贸易类型·采购</div>
            <div class="info-val">{{ganttInfo.tradeTypeLabel}}</div>
          </div>
          <div class="info-item">
            <div class="info-title">贸易主体·采购</div>
            <div class="info-val">{{ganttInfo.tradeBodyLabel}}</div>
          </div>
          <div class="info-item">
            <div class="info-title">贸易主体·销售</div>
            <div class="info-val">{{ganttInfo.sellerTradeBodyLabel}}</div>
          </div>
          <a-divider />
          <div class="info-item">
            <div class="info-title">预计装载时间</div>
            <div class="info-val">{{ganttInfo.expectedLoadingDate}}</div>
          </div>
          <div class="info-item">
            <div class="info-title">实际装载时间</div>
            <div class="info-val">{{ganttInfo.realityLoadingDate}}</div>
          </div>
          <div class="info-item">
            <div class="info-title">预计卸载完成窗口</div>
            <div class="info-val">{{ganttInfo.expectedUnloadingWindow}}</div>
          </div>
          <div class="info-item">
            <div class="info-title">装载港</div>
            <div class="info-val">{{ganttInfo.expectedLoadingPort}}</div>
          </div>
          <div class="info-item">
            <div class="info-title">卸载港</div>
            <div class="info-val">{{ganttInfo.expectedUnloadingPort}}</div>
          </div>
          <div class="info-item">
            <div class="info-title">合同装载量</div>
            <div class="info-val">{{ganttInfo.loadingCapacity}}</div>
          </div>
          <div class="info-item">
            <div class="info-title">实际装载量</div>
            <div class="info-val">{{ganttInfo.realityLoadingCapacity}}</div>
          </div>
          <a-divider />
          <div class="info-item">
            <div class="info-title">船速</div>
            <div class="info-val">{{ganttInfo.shipSpeed}}</div>
          </div>
          <div class="info-item">
            <div class="info-title">航线</div>
            <div class="info-val">
              {{ganttInfo.shipRouteLabel}}
            </div>
          </div>
          <div class="info-item">
            <div class="info-title">油耗</div>
            <div class="info-val">{{ganttInfo.oilConsumptionString}}</div>
          </div>
          <div class="info-item">
            <div class="info-title">船舶名称</div>
            <div class="info-val">{{ganttInfo.shipName}}</div>
          </div>
          <div class="info-item">
            <div class="info-title">IMO</div>
            <div class="info-val">{{ganttInfo.imo}}</div>
          </div>
          <div class="info-item">
            <div class="info-title">贸易主体·船舶</div>
            <div class="info-val">{{ganttInfo.shipTradeBodyLabel}}</div>
          </div>
          <a-divider />
          <div class="info-item">
            <div class="info-title">巴拿马运河预定时间</div>
            <div class="info-val">{{ganttInfo.panamaCanalReservationDate}}</div>
          </div>
          <div class="info-item">
            <div class="info-title">换港时间1</div>
            <div class="info-val">{{ganttInfo.portChangeDateOne}}</div>
          </div>
          <div class="info-item">
            <div class="info-title">换港时间2</div>
            <div class="info-val">{{ganttInfo.portChangeDateTwo}}</div>
          </div>
          <div class="info-item">
            <div class="info-title">换船/指船时间1</div>
            <div class="info-val">{{ganttInfo.shipChangeDateOne}}</div>
          </div>
          <div class="info-item">
            <div class="info-title">换船时间2</div>
            <div class="info-val">{{ganttInfo.shipChangeDateTwo}}</div>
          </div>
          <a-divider />
          <div class="info-item">
            <div class="info-title">预计满载航程天数</div>
            <div class="info-val">{{ganttInfo.expectedFullLoadVoyageDays}}</div>
          </div>
          <div class="info-item">
            <div class="info-title">预计卸载时间·回国</div>
            <div class="info-val">{{ganttInfo.expectedUnloadingWindow}}</div>
          </div>
          <div class="info-item">
            <div class="info-title">预计卸载时间·欧洲</div>
            <div class="info-val">{{ganttInfo.europeUnloadTime}}</div>
          </div>
          <div class="info-item">
            <div class="info-title">预计卸载时间·印度</div>
            <div class="info-val">{{ganttInfo.indiaUnloadTime}}</div>
          </div>
          <div class="info-item">
            <div class="info-title">预计卸载完成时间</div>
            <div class="info-val">{{ganttInfo.expectedUnloadingCompletionWindow}}</div>
          </div>
          <a-divider />
          <div class="info-item">
            <div class="info-title">预计空载航程天数</div>
            <div class="info-val">{{ganttInfo.expectedEmptyLoadVoyageDays}}</div>
          </div>
          <div class="info-item">
            <div class="info-title">预计空载返程时间</div>
            <div class="info-val">{{ganttInfo.expectedEmptyReturnWindow}}</div>
          </div>
          <div class="info-item">
            <div class="info-title">实际卸载时间</div>
            <div class="info-val">{{ganttInfo.realityUnloadingDate}}</div>
          </div>
          <div class="info-item">
            <div class="info-title">是否审批</div>
            <div class="info-val">{{ganttInfo.schemeApprove === 1? '未审批': '已审批'}}</div>
          </div>
          <div class="info-item">
            <div class="info-title">状态</div>
            <div class="info-val">
                <span v-for="item in planType" :key="item.value">
                  <span v-if="item.value === ganttInfo.executeStatus">
                    {{item.label}}
                  </span>
                </span>
            </div>
          </div>
          <div class="info-item">
            <div class="info-title">备注</div>
            <div class="info-val">{{ganttInfo.remark}}</div>
          </div>
        </div>
      </div>
      <a-drawer
          v-model:visible="childrenDrawer"
          title="编辑"
          width="1150"
          :footer-style="{ textAlign: 'center' }"
      >
        <div class="form-box">
          <div class="form-box-item">
            <div class="box-item-head">
              当前方案
            </div>
            <div class="form-content">
              <div class="content-item">
                <a-descriptions :column="2" :labelStyle="labelStyle">
                  <a-descriptions-item label="时间">{{newHistory.createDate}}</a-descriptions-item>
                  <a-descriptions-item label="优化人">{{newHistory.createBy}}</a-descriptions-item>
                  <a-descriptions-item label="运费">{{newHistory.ship}}</a-descriptions-item>
                  <a-descriptions-item label="贸易利润率">{{newHistory.trade}}</a-descriptions-item>
                </a-descriptions>
                <div class="form-item-border">
                  <a-form-item label="船舶名称">
                    <a-input :bordered="false" disabled v-model:value="newHistory.shipName"  placeholder="请输入"/>
                  </a-form-item>
                </div>
                <div class="form-item-border">
                  <a-form-item label="舱容">
                    <a-input :bordered="false" disabled v-model:value="newHistory.loadingCapacityString" placeholder="请输入"/>
                  </a-form-item>
                </div>
                <div class="form-item-border">
                  <a-form-item label="满载航程天数">
                    <a-input :bordered="false" disabled v-model:value="newHistory.expectedFullLoadVoyageDays"  placeholder="请输入"/>
                  </a-form-item>
                </div>
                <div class="form-item-border">
                  <a-form-item label="空载航程天数">
                    <a-input :bordered="false" disabled v-model:value="newHistory.expectedEmptyLoadVoyageDays"  placeholder="请输入"/>
                  </a-form-item>
                </div>
                <div class="form-item-border">
                  <a-form-item label="空载返程窗口">
                    <a-input :bordered="false" disabled v-model:value="newHistory.expectedEmptyReturnWindow"  placeholder="请输入"/>
                  </a-form-item>
                </div>
                <div class="item-ul" v-if="ganttHistory.length> 0">
                  <div class="item-li">
                    <div class="li-label">优化记录：</div>
                    <a-button class="info-btn" @click="goHistoryInfo(newHistory.planId)">查看详情</a-button>
                  </div>
                </div>
              </div>
              <div class="content-scroll">
                <div class="content-item" v-for="item in ganttHistory" :key="item.id">
                  <a-descriptions :column="2" :labelStyle="labelStyle">
                    <a-descriptions-item label="时间">{{item.createDate}}</a-descriptions-item>
                    <a-descriptions-item label="优化人">{{item.createBy}}</a-descriptions-item>
                    <a-descriptions-item label="运费">{{item.ship}}</a-descriptions-item>
                    <a-descriptions-item label="贸易利润率">{{item.trade}}</a-descriptions-item>
                  </a-descriptions>
                  <div class="form-item-border">
                    <a-form-item label="船舶名称">
                      <a-input :bordered="false" disabled v-model:value="item.shipName"  placeholder="请输入"/>
                    </a-form-item>
                  </div>
                  <div class="form-item-border">
                    <a-form-item label="舱容">
                      <a-input :bordered="false" disabled v-model:value="item.loadingCapacityString" placeholder="请输入"/>
                    </a-form-item>
                  </div>
                  <div class="form-item-border">
                    <a-form-item label="满载航程天数">
                      <a-input :bordered="false" disabled v-model:value="item.expectedFullLoadVoyageDays"  placeholder="请输入"/>
                    </a-form-item>
                  </div>
                  <div class="form-item-border">
                    <a-form-item label="空载航程天数">
                      <a-input :bordered="false" disabled v-model:value="item.expectedEmptyLoadVoyageDays"  placeholder="请输入"/>
                    </a-form-item>
                  </div>
                  <div class="form-item-border">
                    <a-form-item label="空载返程窗口">
                      <a-input :bordered="false" disabled v-model:value="item.expectedEmptyReturnWindow"  placeholder="请输入"/>
                    </a-form-item>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <a-divider type="vertical" :style="{height: '2000px'}"/>
          <div class="form-box-item">
            <div class="box-item-head">
              基础信息
            </div>
            <div class="form-content">
              <div class="content-item">
                <div class="form-item-border">
                  <a-form-item label="资源合同·采购">
                    <a-select :bordered="false" v-model:value="formState.conId" placeholder="请选择资源合同" :options="contractOption" />
                  </a-form-item>
                </div>
                <div class="form-item-border">
                  <a-form-item label="资源合同·销售">
                    <a-select :bordered="false" v-model:value="formState.sellerResourceContract" placeholder="请选择资源·销售合同" :options="serllContractOption" />
                  </a-form-item>
                </div>
                <div class="form-item-border">
                  <a-form-item label="资源方">
                    <a-input :bordered="false" disabled v-model:value="formState.seller"  placeholder="请输入"/>
                  </a-form-item>
                </div>
                <div class="form-item-border">
                  <a-form-item label="买方">
                    <a-input :bordered="false" disabled v-model:value="formState.buyer"  placeholder="请输入"/>
                  </a-form-item>
                </div>
                <div class="form-item-border">
                  <a-form-item label="贸易类型·采购" name="tradeType">
                    <a-select :bordered="false"  disabled v-model:value="formState.tradeType" placeholder="请选择贸易类型" :options="areas" />
                  </a-form-item>
                </div>
                <div class="form-item-border">
                  <a-form-item label="贸易主体·采购" name="tradeBody">
                    <a-select :bordered="false"  disabled v-model:value="formState.tradeBody" placeholder="请选择贸易主体" :options="tradeareas" />
                  </a-form-item>
                </div>
                <div class="form-item-border">
                  <a-form-item label="贸易主体·销售" name="sellerTradeBody">
                    <a-select :bordered="false"  disabled v-model:value="formState.sellerTradeBody" placeholder="请选择贸易主体" :options="tradeareas" />
                  </a-form-item>
                </div>
                <a-divider/>
                <div class="form-item-border">
                  <a-form-item label="装载港">
                    <a-tree-select
                        :bordered="false"
                        v-model:value="formState.expectedLoadingPort"
                        style="width: 100%"
                        :tree-data="portTree"
                        tree-checkable
                        allow-clear
                        :height="233"
                        :show-checked-strategy="SHOW_CHILD"
                        placeholder="请选择装载港"
                        tree-node-filter-prop="label"
                        :max-tag-count="2"
                    />
                  </a-form-item>
                </div>
                <div class="form-item-border">
                  <a-form-item label="卸载港">
                    <a-tree-select
                        :bordered="false"
                        v-model:value="formState.expectedUnloadingPort"
                        style="width: 100%"
                        :tree-data="portTree"
                        tree-checkable
                        allow-clear
                        :height="233"
                        :show-checked-strategy="SHOW_CHILD"
                        placeholder="请选择装载港"
                        tree-node-filter-prop="label"
                        :max-tag-count="2"
                    />
                  </a-form-item>
                </div>
                <div class="form-item-border">
                  <a-form-item label="合同装载量">
                    <a-input-number :bordered="false" v-model:value="formState.loadingCapacity" :style="{width: '100%'}" placeholder="请输入装载量"  :min="1" >
                      <template #addonAfter>
                        <a-select  style="width: 100px" v-model:value="formState.quantityUnit">
                          <a-select-option :value="1">MMBtu</a-select-option>
                          <a-select-option :value="2">m³</a-select-option>
                          <a-select-option :value="3">MT</a-select-option>
                        </a-select>
                      </template>
                    </a-input-number>
                  </a-form-item>
                </div>
                <div class="form-item-border">
                  <a-form-item label="实际装载量">
                    <a-input-number disabled :bordered="false" v-model:value="formState.realityLoadingCapacity"  placeholder="请输入"/>
                  </a-form-item>
                </div>
                <div class="form-item-border">
                  <a-form-item label="预计装载时间">
                    <a-date-picker :bordered="false" :style="{width: '100%'}" v-model:value="formState.expectedLoadingDate" show-time value-format="YYYY-MM-DD HH:mm:ss" />
                  </a-form-item>
                </div>
                <div class="form-item-border">
                  <a-form-item label="实际装载时间">
                    <a-date-picker :bordered="false" disabled :style="{width: '100%'}" v-model:value="formState.expectedLoadingDate" show-time value-format="YYYY-MM-DD HH:mm:ss" />
                  </a-form-item>
                </div>
                <a-divider/>
                <div class="form-item-border">
                  <a-form-item label="预计装载完成窗口">
                    <a-date-picker :bordered="false" disabled :style="{width: '100%'}" v-model:value="formState.expectedLoadingCompletionWindow" show-time value-format="YYYY-MM-DD HH:mm:ss" />
                  </a-form-item>
                </div>
                <div class="form-item-border">
                  <a-form-item label="巴拿马运河预定时间">
                    <a-input-number :bordered="false" addonAfter="天"
                                    disabled
                                    v-model:value="formState.panamaCanalReservationDate" :style="{width: '100%'}" placeholder="请输入"
                    />
                  </a-form-item>
                </div>
                <div class="form-item-border">
                  <a-form-item label="换港时间1">
                    <a-date-picker :bordered="false" disabled :style="{width: '100%'}" v-model:value="formState.portChangeDateOne" show-time value-format="YYYY-MM-DD HH:mm:ss" />
                  </a-form-item>
                </div>
                <div class="form-item-border">
                  <a-form-item label="换港时间2">
                    <a-date-picker :bordered="false" disabled :style="{width: '100%'}" v-model:value="formState.portChangeDateTwo" show-time value-format="YYYY-MM-DD HH:mm:ss" />
                  </a-form-item>
                </div>
                <div class="form-item-border">
                  <a-form-item label="换船/指船时间1">
                    <a-date-picker :bordered="false" disabled :style="{width: '100%'}" v-model:value="formState.shipChangeDateOne" show-time value-format="YYYY-MM-DD HH:mm:ss" />
                  </a-form-item>
                </div>
                <div class="form-item-border">
                  <a-form-item label="换船时间2">
                    <a-date-picker :bordered="false" disabled :style="{width: '100%'}" v-model:value="formState.shipChangeDateTwo" show-time value-format="YYYY-MM-DD HH:mm:ss" />
                  </a-form-item>
                </div>
                <a-divider/>
                <div class="form-item-border">
                  <a-form-item label="预计满载航程天数">
                    <a-input-number :bordered="false" addonAfter="天"
                                    disabled
                                    v-model:value="formState.expectedFullLoadVoyageDays" :style="{width: '100%'}" placeholder="请输入"
                    />
                  </a-form-item>
                </div>
                <div class="form-item-border">
                  <a-form-item label="预计卸载时间·中国">
                    <a-date-picker :bordered="false" disabled  :style="{width: '100%'}" v-model:value="formState.expectedUnloadingWindow" show-time value-format="YYYY-MM-DD HH:mm:ss" />
                  </a-form-item>
                </div>
                <div class="form-item-border">
                  <a-form-item label="预计卸载时间·欧洲">
                    <a-date-picker :bordered="false" disabled :style="{width: '100%'}" v-model:value="formState.europeUnloadTime" show-time value-format="YYYY-MM-DD HH:mm:ss" />
                  </a-form-item>
                </div>
                <div class="form-item-border">
                  <a-form-item label="预计卸载时间·印度">
                    <a-date-picker :bordered="false" disabled :style="{width: '100%'}"  v-model:value="formState.indiaUnloadTime" show-time value-format="YYYY-MM-DD HH:mm:ss" />
                  </a-form-item>
                </div>
                <div class="form-item-border">
                  <a-form-item label="预计卸载完成时间">
                    <a-date-picker :bordered="false" disabled :style="{width: '100%'}"  v-model:value="formState.expectedUnloadingCompletionWindow" show-time value-format="YYYY-MM-DD HH:mm:ss" />
                  </a-form-item>
                </div>
                <div class="form-item-border">
                  <a-form-item label="预计空载航程天数">
                    <a-input-number :bordered="false" addonAfter="天"
                                    disabled
                                    v-model:value="formState.expectedEmptyLoadVoyageDays" :style="{width: '100%'}" placeholder="请输入"
                    />
                  </a-form-item>
                </div>
                <div class="form-item-border">
                  <a-form-item label="预计空载返程时间">
                    <a-date-picker :bordered="false" disabled :style="{width: '100%'}"  v-model:value="formState.expectedEmptyReturnWindow" show-time value-format="YYYY-MM-DD HH:mm:ss" />
                  </a-form-item>
                </div>
                <div class="form-item-border">
                  <a-form-item label="实际卸载时间">
                    <a-date-picker :bordered="false" disabled :style="{width: '100%'}"  v-model:value="formState.realityUnloadingDate" show-time value-format="YYYY-MM-DD HH:mm:ss" />
                  </a-form-item>
                </div>
                <a-divider/>
                <div class="form-item-border">
                  <a-form-item label="船舶名称">
                    <a-input :bordered="false" disabled v-model:value="formState.shipName"  placeholder="请输入"/>
                  </a-form-item>
                </div>
                <div class="form-item-border">
                  <a-form-item label="IMO">
                    <a-input :bordered="false" disabled v-model:value="formState.imo"  placeholder="请输入"/>
                  </a-form-item>
                </div>
                <div class="form-item-border">
                  <a-form-item label="贸易主体·船舶">
                    <a-select :bordered="false"  disabled v-model:value="formState.shipTradeBody" placeholder="请选择贸易主体" :options="tradeareas" />
                  </a-form-item>
                </div>
                <a-divider/>
                <a-form-item label="航线">
                  <a-checkbox-group  style="width: 100%" v-model:value="formState.shipRoute" disabled>
                    <a-row>
                      <a-col class="custom-checkobox" :span="8" v-for="item in AirOptions" :key="item.value">
                        <a-checkbox :value="item.value">{{item.label}}</a-checkbox>
                      </a-col>
                    </a-row>
                  </a-checkbox-group>
                </a-form-item>
                <div class="form-item-border">
                  <a-form-item label="船速">
                    <a-input-number :bordered="false" addonAfter="节"
                                    v-model:value="formState.shipSpeed" :style="{width: '100%'}" placeholder="请输入船速"
                                    :max="19.5"
                                    :min="12" />
                  </a-form-item>
                </div>
                <div class="form-item-border">
                  <a-form-item label="油耗">
                    <a-input :bordered="false"  v-model:value="formState.oilConsumption"  placeholder="请输入"/>
                  </a-form-item>
                </div>
                <a-divider/>
                <div class="form-item-border">
                  <a-form-item label="备注">
                    <a-textarea :bordered="false" v-model:value="formState.remark"  placeholder="请输入"/>
                  </a-form-item>
                </div>
                <a-form-item label="是否审批">
                  <a-radio-group v-model:value="formState.schemeApprove">
                    <a-radio :value="1">是</a-radio>
                    <a-radio :value="2">否</a-radio>
                  </a-radio-group>
                </a-form-item>
                <a-form-item label="状态">
                  <a-radio-group v-model:value="formState.executeStatus" disabled>
                    <a-radio :value="0">未下发</a-radio>
                    <a-radio :value="1">已下发</a-radio>
                    <a-radio :value="2">已排布</a-radio>
                    <a-radio :value="3">已完成</a-radio>
                    <a-radio :value="4">已终止</a-radio>
                  </a-radio-group>
                </a-form-item>
              </div>
            </div>
          </div>
        </div>
        <template  #footer>
          <a-button style="margin-right: 26px"  key="back" class="border-btn" @click="onClose">取消</a-button>
          <a-button key="submit" @click="onSubmitForm" class="search-btn1">保存</a-button>
        </template>
      </a-drawer>
    </a-drawer>
  </div>
</template>
<script setup>
import {ref, getCurrentInstance, reactive, onMounted, watch, defineProps} from 'vue';
import CustomColumnModel from '../CustomColumnModel/CustomColumnModel.vue'
const { proxy  } = getCurrentInstance()
import {UploadOutlined, FilterOutlined} from '@ant-design/icons-vue';
const customData = ref([])
const activeModule = ref('sp_dispatch_scheme_detail')
const columSaveData = ref([])
const columnForm = ref()
const customUpdate = ref('')
// 贸易主体
const tradeareas = ref([
  {
    label: '国贸',
    value: 1
  },
  {
    label: '新贸',
    value: 2
  },
  {
    label: '国贸&新贸',
    value: 3
  },
])
// 贸易类型
const areas = ref([
  {
    label: '长协',
    value: 1
  },
  {
    label: '中期',
    value: 2
  },
  {
    label: '现货',
    value: 3
  }
])
const pagination = ref({
  pageSize: 10,
  current: 1,
  total: 0,
  showQuickJumper: true,
  showSizeChanger: true,
  showTotal: total => `共 ${total} 条`,
  size: 'small'
})
const tableData = reactive({
  columns: [],
  data: [],
  customData:  customData.value,
  selectedRowKeys: [],
  selectedRowsArr: {}
})
const props = defineProps({
  isRedraw: {
    type: Number,
    default: 0
  },

})
watch(() => props.isRedraw, (newVal) => {
  console.log('我的图表需要重绘不', newVal)
  getPageList()
  getUserColum()
})
const onSelectChange = (selectedRowKeys, selectedRows) => {
  console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
  tableData.selectedRowKeys = selectedRowKeys
  tableData.selectedRowsArr = selectedRows
};
const addColumn = () => {
  customUpdate.value = ''
  let list = []
  let newList = []
  list = tableData.columns
  newList = JSON.parse(JSON.stringify(list))
  console.log('保存的列',newList)
  if (newList.length > 0) {
    newList.map(item => {
      if (item.key !== 'tags') {
        columSaveData.value.push(item.key)
      }
    })
  }
  columnForm.value.showModal()
  console.log('获取到保存的值没', columSaveData)
}
const onSaveColumn = (item) => {
  console.log('传回来的item', item)
  customUpdate.value = item
  columSaveData.value = []
  getPageList()
  getUserColum()
}
/**
 * 获取显示列
 * */
const getPageList = () => {
  let customObj = {
    module: activeModule.value
  }
  /**
   * 列表展示所有列
   * */
  proxy.$api.getTableColumnCustom(customObj).then(res => {
    console.log('成功了没列', res)
    customData.value = res.resultObject
  })
}
/**
 * 获取表格数据
 * */
const getUserColumPage = () => {
  let newObj = {
    pageNum: pagination.value.current,
    pageSize: pagination.value.pageSize,
    seller: ''
  }
  /**
   * 表格数据
   * */
  proxy.$api.postScheduilingPage(newObj).then(res => {
    console.log('表格数据', res)
    tableData.data = res.resultObject.list
    if (tableData.data &&  tableData.data.length > 0) {
      tableData.data.map(item => {
        Object.assign(item, {
          id: item.id.toString()
        })
      })
    }
    pagination.value.total = res.resultObject.total
  })
}
/**
 * 表格字段
 * */
const getUserColum = () => {
  /**
   * 用户自定义列
   * */
  proxy.$api.getTableColumn({module: 'sp_dispatch_scheme_detail'}).then(res => {
    console.log('成功了没', res)
    let resData = res.resultObject
    let newData = []
    // let firstObj =  {
    //   title: '序号',
    //   dataIndex: 'orderNum',
    //   key: 'orderNum',
    //   width: '80px',
    //   fixed: 'left',
    //   align: 'center'
    // }
    let lastObj =  {
      title: '操作',
      key: 'tags',
      fixed: 'right',
      align: 'left',
      resizable: true,
      width: 150
    }
    if ( customData.value.length > 0) {
      resData.map((item) => {
        customData.value.map(cItem => {
          if (item.columnKey === cItem.key) {
            let obj =  {
              title: '',
              dataIndex: '',
              key: '',
              ellipsis: true,
              resizable: true,
              align: 'left',
              width: 150
            }
            Object.assign(obj, {
              title: cItem.name,
              dataIndex: item.columnKey,
              key: item.columnKey,
              fixed: item.fixed ===1 ? 'left' : '',
            })
            newData.push(obj)
          }
        })
      })
      tableData.columns.push(lastObj)
      tableData.columns = [...newData, lastObj]
      const hash = {}
      tableData.columns = tableData.columns.reduce((item,next) => {
        hash[next.dataIndex]? '' : hash[next.dataIndex] = true && item.push(next)
        return item
      }, [])
    }
    getUserColumPage()
  })
}
const handleTableChange = (paginationpage) => {
  pagination.value.pageSize = paginationpage.pageSize
  pagination.value.current = paginationpage.current
  pagination.value.total = paginationpage.total
  console.log('分页了', paginationpage)
  getUserColumPage()
}
/**
 * 导出
 * */
const exportList = ref({
  ids: [],
  searchItem: ''
})
const exportData = (val) => {
  console.log('导出的数据', val)
  if (tableData.selectedRowsArr && tableData.selectedRowsArr.length > 0) {
    tableData.selectedRowsArr.map(item => {
      exportList.value.ids.push(item.id)
    })
  }
  proxy.$api.postScheduilingPageExport(exportList.value).then(res => {
    if (res.resultCode === 0) {
      message.success('导出成功')
      // 创建一个隐藏的链接元素用于下载
      let a = document.createElement('a');
      a.href = res.resultObject;
      // 模拟点击下载链接
      a.style.display = 'none';
      document.body.appendChild(a);
      a.click();
      // 清理下载链接元素
      document.body.removeChild(a);
    }
  })
}
import { useRouter } from "vue-router";
import {message} from "ant-design-vue";
const router = useRouter()
const goDtails = (val) => {
  // router.push({
  //   path: '/plan/schedulingDetail',
  //   query: {
  //     id: id.toString()
  //   }
  // })
  showVisiModel(val)
}
const visible = ref(false)
const ganttInfo = ref( {})
const childrenDrawer = ref(false)
const newHistory = ref({})
const ganttHistory = ref([])
const formState = ref({
  id: '',
  createDate: '',
  createBy: '',
  orderNumber: null,
  ids: null,
  schemeId: '',
  schemeNumber: '',
  voyageNo: '',
  goodsNum: '',
  resourceContract: '',
  contractName: '',
  seller: '',
  tradeType:'',
  tradeBody: '',
  expectedLoadingDate: '',
  expectedLoadingCompletionWindow: '',
  expectedLoadingPort: [],
  shipName: '',
  imo: '',
  panamaCanalReservationDate: null,
  portChangeDateOne: null,
  portChangeDateTwo: null,
  shipChangeDateOne: null,
  shipChangeDateTwo: null,
  loadingCapacity: '',   // 总容量
  expectedUnloadingPort: [],
  expectedUnloadingWindow: '',
  indiaUnloadTime: '',
  europeUnloadTime: '',
  expectedFullLoadVoyageDays: '',
  expectedUnloadingCompletionWindow: '',
  expectedEmptyLoadVoyageDays: '',
  expectedEmptyReturnWindow: '',
  shipSpeed: '',
  quantityUnit: '',
  singleGoodsQuantity: '', //已装
  shipRoute: [],
  shipTradeBody: '',
  oilConsumption: '',
  shipContractName: '',
  shipContractId: '',
})
const showVisiModel = (val) => {
  visible.value = true
  ganttInfo.value = val

}
const afterVisibleChange = bool => {
  console.log('visible', bool);
};
const onClose = () => {
  childrenDrawer.value = false
};
const showChildrenDrawer = () => {
  childrenDrawer.value = true;
  formState.value = ganttInfo.value
  formState.value.shipRoute = ganttInfo.value.shipRoute.split(',')
  let obj = {
    schemeDetailId: ganttInfo.value.id.toString(),
    schemeId: ganttInfo.value.schemeId.toString(),
    planId: ganttInfo.value.planId.toString(),
    dataType: 2,
    createBy: localStorage.getItem('userName'),
  }
  proxy.$api.postGanttOneHistory(obj).then(res => {
    console.log('获取到历史记录没有', res)
    let newArr = res.resultObject
    newHistory.value = newArr[0]
    if (newArr.length > 1) {
      newArr.map((item, index) => {
        if (index > 0) {
          ganttHistory.value.push(item)
        }
      })
    }
  })
};
const handleResizeColumn = (w, col) => {
  col.width = w
}
onMounted(() => {
  getUserColum()
  getPageList()
})
</script>

<style lang="scss" scoped>
.sched-table {
  width: 100%;
  padding: 32px 16px 16px 16px;
  background: #ffffff;
  border-radius: 4px;
  .table-download {
    margin-bottom: 12px;
    display: flex;
    justify-content: space-between;
  }
}
.table-btn-box {
  display: flex;
  text-align: center;
  .btn-1 {
    color: #0062AD;
    padding-left: 10px;
  }
  .btn-2 {
    color: #6B7A8B;
    border-right: 1px solid #DCDEE0;
    border-left: 1px solid #DCDEE0;
    padding-left: 10px;
  }
  .btn-3 {
    color: #F5001D;
    padding-left: 10px;
  }
}
.type-noexecution {
  color: #FA6400;
}
.type-yesexecution {
  color: #0062AD;
}
.type-executed {
  color: #27AF91;
}
.type-circle {
  font-weight: 800;
  padding-right: 5px;
}
</style>
